import { URL, Toast, ajax } from '../../utils/index'

const tmp = Math.PI / 2;
Component({
  options: {
    multipleSlots: true
  },
  properties: {
    entity: {
      type: Object,
      value: ''
    },
    dataArr: {
      type: Array,
      value: [["清晰度分析", 88], ["语速分析", 60], ["准确率分析", 66], ["流利度分析", 90], ["音量分析", 95]]
    },
  },
  data: {
    numCount: 0,//元素个数
    numSlot: 0, //一条线上的总节点数
    cwidth: 0, // canvas 宽度
    caCenter: 0,//中心点
    angle: 0,//角度
    radius: 0, // 半径
    radCtx: null, // canvas 对象
    lineWidth: 0.5,
    lineStyle: '#DBDBDB',
    // dataArr: [["清晰度分析", 88], ["语速分析", 60], ["准确率分析", 66], ["流利度分析", 90], ["音量分析", 95]]
  },
  /**
   * 函数
   */
  methods: {
    cancelClick() {
      this.triggerEvent("cancel")
    },
    drawRadar: function () {
      var { radCtx } = this.data
      this.drawArcEdge()
      this.drawLinePoint()
      this.drawRegion()
      this.drawTextCans()
      this.drawCircle()
      this.profilePhoto()
      radCtx.draw()
    },
    drawArcEdge: function () {
      let { numSlot, radCtx, radius, caCenter, lineWidth, lineStyle } = this.data
      radCtx.setStrokeStyle(lineStyle), radCtx.setLineWidth(lineWidth);
      for (var i = 0; i < numSlot; i++) radCtx.beginPath(), radCtx.arc(caCenter, caCenter, radius / numSlot * (i + 1), 0, 2 * Math.PI),radCtx.stroke()
    },
    drawLinePoint: function () {
      let { angle, radCtx, radius, caCenter, numCount, lineWidth, lineStyle } = this.data
      radCtx.beginPath();
      radCtx.setLineWidth(lineWidth), radCtx.setStrokeStyle(lineStyle)
      for (var k = 0; k < numCount; k++) {
        let co = Math.cos(angle * k - tmp), si = Math.sin(angle * k - tmp), x = caCenter + radius * co, y = caCenter + radius * si;
        radCtx.moveTo(caCenter, caCenter), radCtx.lineTo(caCenter + radius * Math.cos(angle * k - tmp), caCenter + radius * Math.sin(angle * k - tmp));
      }
      radCtx.stroke();
    },
    drawRegion: function () {
      let { angle, radCtx, radius, caCenter, numCount, dataArr } = this.data, co = Math.cos(- tmp), si = Math.sin(- tmp), t = dataArr[0][1];
      radCtx.beginPath();
      for (var m = 0; m < numCount; m++) {
        let co = Math.cos(angle * m - tmp), si = Math.sin(angle * m - tmp), t = dataArr[m][1], x = caCenter + radius * co * t / 100, y = caCenter + radius * si * t / 100;
        radCtx.lineTo(x, y)
      }
      radCtx.closePath(), radCtx.setFillStyle('rgba(2,111,255,0.2)'), radCtx.fill(), radCtx.beginPath(), radCtx.setStrokeStyle("#026FFF"), radCtx.setLineWidth(1);
      for (var m = 0; m < numCount; m++) {
        let co = Math.cos(angle * m - tmp), si = Math.sin(angle * m - tmp), t = dataArr[m][1], x = caCenter + radius * co * t / 100, y = caCenter + radius * si * t / 100;
        m === 0 ? radCtx.moveTo(x, y) : radCtx.lineTo(x, y)
      }
      radCtx.lineTo(caCenter + radius * co * t / 100, caCenter + radius * si * t / 100), radCtx.stroke();
    },
    drawCircle: function () {
      let { angle, radCtx, radius, caCenter, numCount, dataArr } = this.data, r = 3
      for (var i = 0; i < numCount; i++) {
        let co = Math.cos(angle * i - tmp), si = Math.sin(angle * i - tmp), t = dataArr[i][1], x = caCenter + radius * co * t / 100, y = caCenter + radius * si * t / 100;
        radCtx.beginPath(), radCtx.arc(x, y, r, 0, Math.PI * 2), radCtx.fillStyle = '#026FFF', radCtx.fill();
      }
    },
    drawTextCans: function () {
      let { angle, radCtx, radius, caCenter, numCount, dataArr } = this.data
      radCtx.setFillStyle("#666666"), radCtx.font = '500 12px PingFang SC';
      for (var n = 0; n < numCount; n++) {
        let mAngleTmp = angle * n - tmp, x = caCenter + radius * Math.cos(mAngleTmp), y = caCenter + radius * Math.sin(mAngleTmp);
        mAngleTmp >= 0 && mAngleTmp <= tmp ? radCtx.fillText(dataArr[n][0], x + 2, y + 17) :
          mAngleTmp > tmp && mAngleTmp <= Math.PI ? (radCtx.fillText(dataArr[n][0], x - radCtx.measureText(dataArr[n][0]).width - 2, y + 17)) :
            mAngleTmp > Math.PI && mAngleTmp < Math.PI * 3 / 2 ? (radCtx.fillText(dataArr[n][0], x - radCtx.measureText(dataArr[n][0]).width - 5, y)) : mAngleTmp === - tmp ? (radCtx.fillText(dataArr[n][0], x - radCtx.measureText(dataArr[n][0]).width / 2, y - 10)) : radCtx.fillText(dataArr[n][0], x + 5, y);
      }
    },
    profilePhoto() {
      let { radCtx, caCenter, radius, numSlot } = this.data,r = radius / numSlot * 1
      radCtx.beginPath(), radCtx.setLineWidth(2), radCtx.setStrokeStyle("#FBC01F"), radCtx.arc(caCenter, caCenter, r, 0, 4 * Math.PI, false), radCtx.clip(), radCtx.drawImage('../../assets/logo@3x.png', caCenter - r, caCenter - r, r*2, r*2), radCtx.stroke();
    },
    info(res) {
      let caCenter = res.width / 2
      this.setData({
        numCount: 5,//元素个数
        numSlot: 5, //一条线上的总节点数
        cwidth: res.width, // canvas 宽度
        caCenter: caCenter,//中心点
        angle: Math.PI * 2 / 5,//角度
        radius: caCenter - 60, // 半径
        radCtx: wx.createCanvasContext("radarCanvas"), // canvas 对象
      })
      this.drawRadar()
    }
  },
  // 属性监听
  observers: {},
  // 组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用setData
  created: function () { },
  // 组件生命周期函数，在组件实例进入页面节点树时执行。
  attached: function () { },
  // 在组件布局完成后执行，此时可以获取节点信息
  ready: function () {
    wx.createSelectorQuery().select('.radarCanvas').boundingClientRect(res => this.info(res)).exec();
  },
  // 在组件实例被移动到节点树另一个位置时执行
  moved: function () { },
  // 在组件实例被从页面节点树移除时执行
  detached: function () { }
});